<template lang='pug'>
.phone-box 
    .titleTop(v-if="titleTop.length!==0")
        img(:src="titleTop[0].title")
        img(:src="titleTop[0].content")
        ul
            li(v-for="d in titleTop[0].arr")
                img(v-lazy="d.cover")
    .contul(v-for="item in phoneList" :key="item.pid")
        img.klimg(v-lazy="item.title")
        .klul
            Fir(v-for="d in item.arrList" :data="d" :width="'49%'" :flg="0")
            
</template>
 
<script>
import Fir from '../../components/Fir.vue'
export default {
  name: "vueName",
  data() {
    return {
      titleTop: [],
      phoneList: []
    };
  },
  methods:{
      getPhoneTop(){
          this.$http.get('/ajaxdata/phone/titleTop.json').then(({data})=>{
              this.titleTop = data
          })
      },
      getPhoneList(){
          this.$http.get('/ajaxdata/phone/phoneList.json').then(({data})=>{
              this.phoneList = data
          })
      }
  },
  components:{
    Fir
  },
  mounted(){
      this.getPhoneTop()
      this.getPhoneList()
  }
};
</script>
 
<style scoped lang="sass">
.phone-box 
    width: 100%
    .titleTop
        width: 100%
        background: #000
        img
            width: 100%
            display: block
            margin-top: -.01rem
    .contul
        .klimg
            width: 100%
            display: block
        .klul
            width: 100%
            display: flex
            flex-wrap: wrap
            padding: .05rem
            justify-content: space-around
            background: rgb(219, 230, 243)

</style>